<template>
    <div
            class="full-screen-container bg-gradient-to-br from-sky-50 to-indigo-50 min-h-screen flex items-center justify-center p-6">
        <div class="w-[1200px] bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl flex overflow-hidden">
            <div
                    class="w-[45%] bg-gradient-to-br from-sky-100 via-blue-50 to-indigo-100 p-16 flex flex-col justify-between relative">
                <div class="relative z-10">
                    <h1 class="text-4xl font-bold mb-6 text-gray-800 leading-tight mt-0 -mt-14">
                        智能人才成长画像平台
                    </h1>
                    <p class="text-lg text-gray-600 leading-relaxed mb-4">
                        基于 AI 驱动的人才画像系统，<br />
                        助力企业挖掘人才潜力，实现精准人才管理。
                    </p>
                    <div class="flex flex-wrap gap-4 mb-8">
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-shujufenxi" style="font-size: 2rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">数据分析</span>
                        </div>
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-rencaiguanli" style="font-size: 1.5rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">人才管理</span>
                        </div>
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-jiqiren_o" style="font-size: 2rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">AI 赋能</span>
                        </div>
                    </div>
                </div>
                <img :src="illustrationUrl" alt="人才画像插图"
                     class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[90%] opacity-90" />
            </div>

            <!-- 右侧注册表单 -->
            <div class="flex-1 flex items-center justify-center" style="width: 20rem !important;">
                <div class="w-[400px]">
                    <h2 class="text-2xl font-bold mb-3 mt-3 text-gray-800">欢迎注册</h2>
                    <div  class="space-y-6">
                        <!-- 用户名 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">手机号</label>
                            <div class="relative">
                                <i class="iconfont icon-rencaiguanli absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                   style="font-size: 1rem;"></i>
                                <input v-model="formData.account" type="text" placeholder="请输入手机号 "
                                       class="w-full h-11 pl-11 pr-4 border border-gray-300 !rounded-button input-focus"
                                       @blur="validateAccount" />
                                <p v-if="errors.account" class="text-red-500 text-sm mt-1">{{ errors.account }}</p>
                            </div>
                        </div>

                        <!-- 密码 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                            <div class="relative">
                                <i class="iconfont icon-mima absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                   style="font-size: 1rem;"></i>
                                <input v-model="formData.password" :type="passwordVisible ? 'text' : 'password'"
                                       placeholder="请输入密码"
                                       class="w-full h-11 pl-11 pr-11 border border-gray-300 !rounded-button input-focus" />
                                <i class="iconfont icon-BasicIcons-all- absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-gray-600"
                                   @click="togglePasswordVisibility"></i>
                            </div>
                            <div class="mt-2 text-xs text-gray-500 flex items-center">
                                <i class="iconfont icon-jinggao mr-1" style="font-size: 1rem;"></i>
                                密码须包含字母和数字包含大小写字母、数字和特殊字符，长度在 6-16 位之间
                            </div>
                        </div>

                        <!-- 确认密码 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">确认密码</label>
                            <div class="relative">
                                <i class="iconfont icon-mima absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                   style="font-size: 1rem;"></i>
                                <input v-model="formData.confirmPassword"
                                       :type="confirmPasswordVisible ? 'text' : 'password'" placeholder="请再次输入密码"
                                       class="w-full h-11 pl-11 pr-11 border border-gray-300 !rounded-button input-focus"
                                       @blur="validatePasswords" />
                                <i class="iconfont icon-BasicIcons-all- absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-gray-600"
                                   @click="toggleConfirmPasswordVisibility"></i>
                                <p v-if="errors.confirmPassword" class="text-red-500 text-sm mt-1">{{ errors.confirmPassword
                                    }}</p>
                            </div>
                        </div>

                        <!-- 邮箱 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
                            <div class="relative">
                                <i class="iconfont icon-youxiang absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                   style="font-size: 1rem;"></i>
                                <input v-model="formData.email" type="email" placeholder="请输入邮箱"
                                       class="w-full h-11 pl-11 pr-4 border border-gray-300 !rounded-button input-focus"
                                       @blur="validateEmail" />
                                <p v-if="errors.email" class="text-red-500 text-sm mt-1">{{ errors.email }}</p>
                            </div>
                        </div>

                        <!-- 学校选择 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">学校</label>
                            <div class="relative">
                                <select v-model="formData.school"
                                        class="w-full h-11 pl-4 pr-4 border border-gray-300 !rounded-button input-focus">
                                    <option disabled value="">请选择学校</option>
                                    <option v-for="school in schools" :key="school.value" :value="school.label">
                                        {{ school.label }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <!-- 验证码 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">验证码</label>
                            <div class="flex gap-4">
                                <div class="relative flex-1">
                                    <i class="iconfont icon-yanzhengma absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                       style="font-size: 1rem;"></i> <input v-model="formData.code" type="text"
                                                                            placeholder="请输入验证码"
                                                                            class="w-full h-11 pl-11 pr-4 border border-gray-300 !rounded-button input-focus" />
                                </div>
                                <button type="button" @click="sendVerificationCode" :disabled="isCountdown"
                                        class="!rounded-button whitespace-nowrap px-6 py-3 bg-blue-500 text-white hover:bg-blue-600 transition-all duration-200 flex items-center justify-center min-w-[120px]">
                                    <i class="iconfont icon-zhifeiji mr-2"></i>
                                    {{ isCountdown ? `${countdown} 秒后重试` : '获取验证码' }}
                                </button>
                            </div>
                        </div>

                        <!-- 注册按钮 -->
                        <button style="margin-top: 0.5rem !important;"
                                class="w-full h-11 bg-blue-500 text-white font-medium !rounded-button hover:bg-blue-400 transition-colors whitespace-nowrap"
                                @click="handleSubmit"
                        >
                            立即注册
                        </button>

                        <!-- 登录链接 -->
                        <div style="margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;" class="text-center">
                            <span class="text-gray-600">已有账号？</span>
                            <a href="#" @click.prevent="goToLogin"
                               class="text-primary hover:text-primary/90 font-medium">立即登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router'; // 引入 useRouter
    import { userRegister, getCode, judgeCode } from '../api/user.js';
    import { ElMessage } from "element-plus";

    const router = useRouter();

    // 图片URL
    const illustrationUrl = 'https://ai-public.mastergo.com/ai/img_res/fa9ae7744f0d07f96a1cc2d16fb85468.jpg';
    const form={
            school: '' // 当前选中的学校
        }
    const schools = [
        { value: 'college1', label: '贵州大学' },
        { value: 'college2', label: '贵州医科大学' },
        { value: 'college3', label: '贵州中医药大学' },
        { value: 'college4', label: '贵州师范大学' },
        { value: 'college5', label: '贵州财经大学' },
        { value: 'college6', label: '贵州民族大学' },
        { value: 'college7', label: '贵阳学院' },
        { value: 'college8', label: '贵州商学院' },
        { value: 'college9', label: '贵州警察学院' },
        { value: 'college10', label: '贵阳康养职业大学' },
        { value: 'college11', label: '贵州师范学院' },
        { value: 'college12', label: '贵州理工学院' },
        { value: 'college13', label: '贵州交通职业大学' },
        { value: 'college14', label: '贵州中医药大学时珍学院' },
        { value: 'college15', label: '贵阳信息科技学院' },
        { value: 'college16', label: '贵阳人文科技学院' },
        { value: 'college17', label: '贵州医科大学民族医药学院' }
        // 如有更多学校，继续添加
    ];
    // 表单数据
    const formData = ref({
        account: '',
        password: '',
        confirmPassword: '',
        email: '',
        code: '',
        agreeToTerms: false,
        school: '' // 新增字段
    });

    // 表单错误提示
    const errors = ref({
        account: '',
        password: '',
        confirmPassword: '',
        email: ''
    });

    // 控制输入密码框显示/隐藏
    const passwordVisible = ref(false);
    function togglePasswordVisibility() {
        passwordVisible.value = !passwordVisible.value;
    }

    // 控制确认密码框显示/隐藏
    const confirmPasswordVisible = ref(false);
    function toggleConfirmPasswordVisibility() {
        confirmPasswordVisible.value = !confirmPasswordVisible.value;
    }

    // 校验账号
    function validateAccount() {
        const value = formData.value.account;
        const trimmedValue = value.trim(); // 去除两端空格
        if (!/^\d{11}$/.test(trimmedValue)) {
            errors.value.account = '账号必须是 11 位数字';
        } else {
            errors.value.account = '';
        }
    }

    // 校验密码一致性
    function validatePasswords() {
        if (formData.value.password !== formData.value.confirmPassword) {
            errors.value.confirmPassword = '两次输入的密码不一致';
        } else {
            errors.value.confirmPassword = '';
        }
    }

    // 校验邮箱格式
    function validateEmail() {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.value.email)) {
            errors.value.email = '请输入有效的邮箱地址';
        } else {
            errors.value.email = '';
        }
    }

    const isCountdown = ref(false);
    const countdown = ref(60);
    // 验证码校验
    const sendVerificationCode = () => {
        const email = formData.value.email;
        if (!email) {
            ElMessage({ message: '请输入邮箱地址', type: 'error' })
            return;
        }
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            ElMessage({ message: '请输入有效的邮箱地址', type: 'error' })
            return;
        }
        getCode(email).then(function (response) {
            ElMessage({ message: response, type: 'success' });
        });
        isCountdown.value = true;
        const interval = setInterval(() => {
            if (countdown.value <= 0) {
                clearInterval(interval);
                isCountdown.value = false;
                countdown.value = 60;
            } else {
                countdown.value--;
            }
        }, 1000);
    };

    // 提交表单
    const handleSubmit = () => {
        validateAccount();
        validatePasswords();
        validateEmail();

        if (!/[a-zA-Z]/.test(formData.value.password) || !/[0-9]/.test(formData.value.password) || formData.value.password.length < 6 || formData.value.password.length > 16) {
            ElMessage({ message: '密码必须包含字母和数字，长度在 6-16 位之间', type: 'error' })

            return;
        }
        const data = ({
            email: formData.value.email,
            code: formData.value.code
        });
        judgeCode(data).then(function (response) {
            if (response === "true") {
                userRegister(formData.value.account, formData.value.password, formData.value.email,formData.value.school).then((response) => {
                    router.push({ path: '/login' });
                })
            }
        });
    };

    // 跳转到登录页面
    const goToLogin = () => {
        router.push('/login');
    };
</script>

<style scoped>
    .bg-gradient-to-br {
        background-size: 200% 200%;
        animation: gradientBG 15s ease infinite;
    }

    @keyframes gradientBG {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    input {
        outline: none;
    }

    /* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
    .full-screen-container {
        width: 100vw;
        /* 浏览器窗口的宽度 */
        height: 100vh;
        /* 浏览器窗口的高度 */
        background-color: #3a88bc;
        /* 可以选择合适的背景色 */
        margin: 0;
        /* 去除默认的外边距 */
        padding: 0;
        /* 去除默认的内边距 */
    }

    /* 如果有特定的样式应用于 .body，可以考虑调整 */
    .body {
        width: 100%;
    }

    /* 新增学校选择框样式 */
    select {
        outline: none;
        appearance: none;
        background: white;
        padding: 4px 12px;
        font-family: inherit;
    }
</style>